<template>
<div>
	
	<el-row>
		<el-col :span="8"><div class="grid-content"><h2>新建其他申请（风险操作）</h2></div></el-col>
	</el-row>
	
	<el-row>
	  <el-col :span="30"><div class="grid-content bg-purple-dark"></div></el-col>
	  <el-tag>基本信息</el-tag>
	</el-row>
	
	<el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" size="small" class="demo-ruleForm">
	<el-form label-width="150px" :model="ruleForm"  ref="ruleForm"  :rules="rules">
		<el-form-item label="申请单编号" prop="work_order_code">
			<el-input v-model="ruleForm.work_order_code" placeholder="YWJS-20XX-00X"></el-input>
		</el-form-item>
		<el-form-item label="申请单位名称" prop="applicant_name">
			<el-input v-model="ruleForm.applicant_name" placeholder="请填写申请单位名称"></el-input>
		</el-form-item>
		<el-form-item label="申请单位地址"  prop="applicant_addres">
			<el-input v-model="ruleForm.applicant_addres" placeholder="请填写申请单位地址"></el-input>
		</el-form-item>
		<el-form-item label="单位联系人" prop="unit_contact">
		<el-input v-model="ruleForm.unit_contact" placeholder="请填写单位联系人"></el-input>
		</el-form-item>
		<el-form-item label="联系电话" prop="telephone">
		<el-input v-model="ruleForm.telephone" placeholder="请填写联系电话"></el-input>
		</el-form-item>
		<el-form-item label="E-mail" prop="E_mail">
		<el-input v-model="ruleForm.E_mail" placeholder="请填写电子邮箱"></el-input>
		</el-form-item>
		<el-form-item label="业务系统名称" prop="business_system_name">
		<el-input v-model="ruleForm.business_system_name" placeholder="请填写业务系统名称"></el-input>
		</el-form-item>
		<el-form-item label="接口人/电话" prop="interface_tel">
		<el-input v-model="ruleForm.interface_tel" placeholder="请填写接口人/电话"></el-input>
		</el-form-item>
		<el-form-item label="风险操作内容" prop="risk_operation">
		<el-input v-model="ruleForm.risk_operation" placeholder="请填写风险操作内容"></el-input>
		</el-form-item>

	<el-row>
	  <el-col :span="30"><div class="grid-content bg-purple-dark"></div></el-col>
	  <el-tag>上传附件</el-tag>
	</el-row>
	
		<el-form-item label="上传相关pdf文件" prop="files">
			<el-checkbox-group v-model="ruleForm.files" v-show="false"></el-checkbox-group>
			<el-upload
				ref="uploads"
				:auto-upload="false" 
				class="upload-demo"
				action="http://218.63.75.44:8887/init_other/"			
				:data="ruleForm"
				:on-preview="handlePreview"
				:on-change="handleChange"
				:on-exceed="handleExceed"
				:on-remove="handleRemove"
				:on-success="handleSuccess"
				:on-error="handleError"
				:before-upload="beforeUploadFile"
				multiple
				:limit="limitNum"
				name="files"
				:file-list="filesList"
				accept=".pdf,"
			>
			<el-button type="primary">选择文件</el-button>
			</el-upload>			
		</el-form-item>
	</el-form>


	<el-row>
	  <el-col :span="30"><div class="grid-content bg-purple-dark"></div></el-col>
	</el-row>
	<el-row>
	  <el-col :span="30"><div class="grid-content bg-purple-dark"></div></el-col>
	</el-row>
	<el-row>
	  <el-col :span="30"><div class="grid-content bg-purple-dark"></div></el-col>
	</el-row>
	 
	  

	</el-form-item>
	    <el-button type="primary" @click="submitForm('ruleForm')">提交审批</el-button>
	    <el-button @click="resetForm('ruleForm')">重置</el-button>
	  </el-form-item>
	  
	</el-form>
	    
	
</div>
</template>


<script>
import axios from 'axios'
import Operating_system from '@/assets/data/operating_system.json'
export default {
	data() {
		return {
			ruleForm: {
				work_order_code: 'QJYW-2022-XXX',
				applicant_name: '',
				applicant_addres:'',
				unit_contact: '',
				telephone: '',
				E_mail: '',
				business_system_name: '',
				interface_tel: '',
				risk_operation: '',
			},
			filesList:[],
			limitNum:1,
			previewDialogVisible:false,
			previewDialogImageUrl:"",
			rules: {
				work_order_code: [
					{ required: true, message: '必填:请输入工单编码', trigger: 'blur' }],
				applicant_name: [
					{ required: true, message: '请输入申请单位名称', trigger: 'blur' }],
				applicant_addres: [
					{ required: true, message: '请输入申请单位地址', trigger: 'blur' }],
				unit_contact: [
					{ required: true, message: '请输入单位联系人', trigger: 'blur' }],
				telephone: [
					{ required: true, message: '请输入联系电话', trigger: 'blur' }],
				E_mail: [
					{ required: true, message: '请输入邮箱E-mail', trigger: 'blur' }],
				business_system_name: [
					{ required: true, message: '请输入业务系统名称', trigger: 'blur' }],
				interface_tel: [
					{ required: true, message: '请输入接口人/电话', trigger: 'blur' }],			
			},
		};
	},
	methods: {
		handleClick(tab, event) {
			console.log(tab, event);
		},
		submitForm(addForm){
			let name = localStorage.getItem('cur_username')
			this.ruleForm.name = name
			if(this.filesList.length >=1){
				this.$refs[addForm].validate(async (valid) => {
					if (valid) {
						console.log(this.ruleForm);
							this.$msgbox
								.confirm("确定上传?", "提示信息", {
									cancelButtonText: "取消",
									confirmButtonText: "确定",
									type: "warning",
								})
								.then(() => {
								//进行文件上传
									this.$refs.uploads.submit();
						})
					} else {
						return false;
					}
				});
			}else{
				this.$notify.error({
					title: '警告',
					message: '必须上传pdf格式的申请文件！'
				});
			}
		},
		resetForm(formName) {
				this.$refs.formName.resetFields();
		},
		handlePreview(file){
			this.previewDialogImageUrl = file.url;
			this.previewDialogVisible = true;
		},
		closePreview(){
			this.previewDialogImageUrl = "";
			this.previewDialogVisible = false;
		},
		handleChange(file, fileList){
			this.filesList = fileList
		},
		handleExceed(files,fileList){
			this.$message.warning(`最多选择${this.limitNum}个文件，共选择了${files.length + fileList.length} 个文件`)
		},
		handleRemove(file, fileList){
			console.log('remove :',file)
		},
		handleError(err, file, fileList){
			this.$message.error(file.name,' ',err);
		},
		handleSuccess(res, file,fileList) {
			if (res.form_code == 200 && res.file_code == 200) {
				// 文件上传成功后的回调，比如一些提示信息或者页面跳转都写在这里
				this.$message.success( res.work_order_code + ' ' + res.form_message + ' ' + file.name + ' ' + res.file_msg);
				this.$refs.uploads.clearFiles()
				this.work_order_code='QJYW-2022-XXX'
				this.applicant_name=''
				this.applicant_addres=''
				this.unit_contact=''
				this.telephone= ''
				this.E_mail =''
				this.business_system_name= ''
				this.interface_tel= ''
				this.risk_operation= ''
				this.file_path= ''
				this.current_link=''
				this.process= ''
			} else {
				this.$message.error(file.name+' '+res.msg);
				let _this = this;
				setTimeout(function() {
					_this.$refs.uploads.clearFiles();
				}, 1000);
			}
		},
		beforeUploadFile(file) {
			let extension = file.name.substring(file.name.lastIndexOf('.')+1)
			let size = file.size / 1024 / 1024
			// 检查文件后缀名
			if(extension !== 'pdf') {
				this.$notify.warning({
					title: '警告',
					message: '文件: ' + file.name + '非法 。'+ '\n' + '只能上传pdfw文件（即后缀是.pdf）的文件！'
				});
				return false;
			}
			// 检查文件大小
			if(size > 10) {
				this.$notify.warning({
					title: '警告',
					message: '文件: ' + file.name + '非法。 '+'\n' + '文件大小不得超过50M！'
				});
				return false;
			}
			
		},
	},
}
</script>


<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>